{{ define "sidebar" }}

<nav id="sidebar">
    <div class="sidebar-header">
        <h3><i class="fas fa-comment-dots"></i>
            <a href="/">ChitChat</a>
        </h3>
    </div>

    <ul class="list-unstyled components">
        <p>Let's Chat!</p>
        <li class="active">
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                <i class="fas fa-home"></i>
                Home
            </a>
            <ul class="collapse list-unstyled" id="homeSubmenu">
                <li>
                    <a href="#" data-toggle="modal" data-target="#create-modal">Create a chat room</a>
                </li>
                <li>
                    <a href="#" onclick="setInnerContent('/chats');" id="join-chats-btn">Join a chat room</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                <i class="fas fa-poll"></i>
                Trending
            </a>
            <ul class="collapse list-unstyled" id="pageSubmenu">
                <li>
                    <a href="#">Chat 1</a>
                </li>
                <li>
                    <a href="#">Chat 2</a>
                </li>
                <li>
                    <a href="#">Chat 3</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="/">
                <i class="fas fa-briefcase"></i>
                About
            </a>
        </li>
    </ul>

    <ul class="list-unstyled CTAs">
        <li>
            <a href="#" class="download" onclick="alert('under construction!');">Talk to someone random!</a>
        </li>
    </ul>
</nav>
{{ end }}